<template>
    <div class="footer">
        <div class="bottom">
            <div class="iconfont back">&#xe66d;</div>
            <div class="icon-desc">投票</div>
            <div class="bottom1" ref="poll">
                <div class="iconfont back">&#xe66d;</div>
                <div class="icon-desc">投票</div>
            </div>
        </div>
         <div class="bottom">
            <div class="iconfont back">&#xe611;</div>
            <div class="icon-desc">个人中心</div>
            <div class="bottom1" ref="user">
                <div class="iconfont back">&#xe618;</div>
                <div class="icon-desc">个人中心</div>
            </div>
         </div>
    </div>
</template>

<script>
export default {
  name: 'HomeFooter',
  method: {
    handeScroll (e) {
      console.log(e.touches)
      const screenWith = window.screen.width
      const left = document.documentElement.scrollLeft
      console.log(screenWith, left)
      const dis = (screenWith - left) / screenWith
      let pollOpacity = dis < 0 ? 0 : dis > 1 ? 1 : dis
      let userOpacity = 1 - pollOpacity
      this.$refs.poll.style.opacity = pollOpacity
      this.$refs.user.style.opacity = userOpacity
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>

<style lang="stylus" scoped>
.footer
    z-index:2
    position: fixed
    bottom: 0
    left: 0
    right: 0
    line-height: 1rem
    color: #fff
    font-size: .4rem
    background: #ccc
    text-align: center
    .bottom
        width: 50%
        float: left
        position: relative
        .icon-desc
            line-height: .4rem
            font-size: .32rem
            text-align: center
            padding: 0 0 0 .1rem
            // color: #1296db
        .back
            // position: absolute
            // top: 0
            // left: 0
            text-align: center
            font-size: .65rem
            padding-left: .2rem
        .bottom1
            opacity: 0
            position: absolute
            left: 0
            right: 0
            bottom: 0
            top: 0
            color: #1296db
</style>
